﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <title>安全信息平台</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="~/assets/img/favicon.ico">
    <script src="~/Assets/js/flexible.js"></script>
    <script src="~/Assets/js/jquery-1.11.1.min.js"></script>
    <script src="~/Bussiness/js/base/angular.js"></script>
    <script src="~/Bussiness/js/base/jquery.cookie.js"></script>
    <script src="~/Bussiness/js/base/angular-cookie.js"></script>
    <script src="~/Bussiness/js/tool/watermark.js"></script>
    <script src="~/Assets/js/jquery-ui.min.js"></script>

    <style>

        body {
            margin: 0px;
            padding: 0px;
            overflow: hidden;
            font-family: YouYuan;
            background-image: url('../../Assets/css/img/login_bg.png');
            background-repeat: no-repeat;
            background-position: center center;
            /* 背景图片覆盖整个元素 */
            background-size: cover;
            margin: 0;
            height: 100vh; /* vh 是视口高度的单位，100vh 等于全屏高度 */
            width: 100%;
            display: flex; /* 使用 flexbox 可以确保内容在 body 中居中 */
            justify-content: center;
            align-items: center;
        }

        #main {
            width: 100%;
            height: 100%;
        }

        #logo {
            position: absolute;
            top: 0.7rem;
            left: 1.4rem;
        }

        #postimg {
            /*            background-color:rgb(251,253,255,0.7);*/
            width: 3.4rem;
            height: 2.2rem;
            position: absolute;
            top: 1.25rem;
            left: 1.4rem;
            border-radius: 10px;
        }

            #postimg img {
                width: 100%;
                height: 100%;
            }

        #loginform {
            position: absolute;
            background-color: rgb(251,253,255,0.4);
            width: 2.6rem;
            height: 2.8rem;
            top: 1rem;
            border: 2px solid rgb(255 255 255);
            right: 1rem;
            border-radius: 15px;
        }

        .title {
            position: relative;
            width: 90%;
            top: 0.2rem;
            left: 0.1rem;
            font-size: 0.12rem;
            color: #0A4EA5;
            font-family: 'Microsoft YaHei';
            font-weight: bold;
            border-bottom: 1px #E6E6E6 solid;
        }

            .title p {
                border-bottom: 5px #0A4EA5 solid;
                width: 0.3rem;
                height: 50px;
                margin: 0px;
            }

        .input_item {
            position: relative;
            top: 0.5rem;
            left: 0.15rem;
        }

        .gui-input {
            display: block;
            width: 100%;
            height: 30px;
            padding: 9px 12px;
            font-size: 13px;
            line-height: 1.5;
            color: #555555;
            background-color: #ffffff;
            background-image: none;
            border: 1px solid #dddddd;
            border-radius: 5px;
            -webkit-transition: border-color ease-in-out .15s;
            -o-transition: border-color ease-in-out .15s;
            transition: border-color ease-in-out .15s;
        }

        .d_username {
            width: 82%;
        }

        .d_password {
            margin-top: 0.2rem;
            width: 82%;
        }

        .d_forgetpwd {
            /*color: #0060DB;*/
            color: red;
            font-family: 'Microsoft YaHei';
            text-align: right;
            width: 82%;
            margin-top: 20px;
            font-size: 14px;
        }

        .d_submit {
            margin-top: 0.45rem;
            width: 85%;
            text-align: center;
        }

        .btn-submit {
            background-color: rgb(0,96,219);
            width: 2.3rem;
            color: white;
            height: 55px;
            font-size: 16px;
            border: none;
            border-radius: 5px;
            margin: 0px auto;
            text-align: center;
            cursor: pointer;
        }

        .alertify .dialog .msg {
            padding: 12px;
            margin-bottom: 12px;
            margin: 0;
            text-align: left;
            font-size: 15px;
            font-family: "Microsoft YaHei";
        }
    </style>
</head>
<body ng-app="LoginPage">
    <div id="main" ng-cloak ng-controller="LoginController" ng-init="Test();InitLoginBTN();">
        <div id="logo"><img src="~/Assets/css/img/logo.png"></div>
        <div id="postimg">
            <img src="~/Assets/css/img/postimg.png" />
        </div>
        <div id="loginform">
            <div class="title"><p>登录</p></div>
            <div class="input_item">
                <div class="d_username">
                    <input type="text" name="username" id="username" class="gui-input" placeholder="请输入工号" ng-model="UserName" required>
                </div>
                <div class="d_password">
                    <input type="password" name="password" id="password" class="gui-input" placeholder="请输入密码" ng-model="Password" required>
                </div>
                <div class="d_forgetpwd">
                    <a href="#" style="text-decoration: none; color: #0060DB;">忘记密码</a>
                </div>
                <div class="d_submit">
                    <button class="btn-submit" ng-click="PortalLogin(UserName,Password,2);">{{isLoading?'登录中':'登录'}}</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Bootstrap -->
    <script type="text/javascript" src="~/assets/js/bootstrap/bootstrap.min.js"></script>

    <!-- Page Plugins -->
    <script type="text/javascript" src="~/assets/js/pages/login/EasePack.min.js"></script>
    <script type="text/javascript" src="~/assets/js/pages/login/rAF.js"></script>
    <script type="text/javascript" src="~/assets/js/pages/login/TweenLite.min.js"></script>
    <script type="text/javascript" src="~/assets/js/pages/login/login.js"></script>

    <!-- Theme Javascript -->
    <script type="text/javascript" src="~/assets/js/utility/utility.js"></script>
    <script type="text/javascript" src="~/assets/js/main.js"></script>
    <script type="text/javascript" src="~/assets/js/demo.js"></script>

    <script src="~/bussiness/js/libs/alertify.js"></script>
    <script src="~/bussiness/js/pg/Account.js"></script>
    <script type="text/javascript">

    </script>
</body>
</html>
